---
title: .NET Foundation Project Spotlight
description: This month's .NET Foundation Project Spotlight
permalink: /projects/spotlight
useFunctionsJS: true
---
@section head {
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.11.0/underscore.min.js" data-no-mirror></script>
}

<div id="projects">
<section class="page-section page-section--purple">
    <div class="page-section_container container">
        <div class="page-section_row row">
          <div class="page-section_column col-12 text-center">
            <h1 id="projectHeader"></h1>
			<br />
            <div>
				<h3>
					Project Description
				</h3>
				<span id="projectDescription"></span>
			</div>
			<br />
			<div id="project-owners">
				<h3>Project Owners:</h3>
				<br />
                <div id="projectOwners">
                </div>
			</div>
    </div>
</section>

<section class="page-section page-section--purple--light">
    <div class="page-section_container container">
        <div class="page-section_row row">
          <div class="page-section_column col-12 text-center">
            <h1>
             Interview
            </h1>
			<br />
				<div id="project-interview">
				     <div class="video-iframe">
                         <div class="video-iframe-item">
                             <iframe id="projectYouTube" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="video"></iframe>
                         </div>
                     </div>
					<br />
					<br />
				</div>
			</div>
          </div>
        </div>
    </div>
</section>

<section class="page-section page-section">
	<div class="page-section_container container">
		<div class="page-section_row row">
			<div class="page-section_column col-12 text-center">
				<h1>
					Get Involved
				</h1>
				<div class="card-columns" id="columns" style="text-align:center">
					<div style="color:white;" id="contributers"></div>
                    <div style="color:white;" id="issues"></div>
					<div class="card bg-foundation">
						<div class="card-body card--features">
							<h3 style="color: white;">References</h3>
							<p class="card-text">
								<a id="gitHubRepo" style="color: white" href="" target="_blank">GitHub Repo</a>
							</p>
							<p class="card-text">
								<a id="projectWebsite" style="color: white" href="" target="_blank">Project Website</a>
							</p>
							<p class="card-text">
								<a id="communityUrl" style="color: white" href="" target="_blank">Community</a>
							</p>
							<p class="card-text">
								<a id="documentationUrl" style="color: white" href="" target="_blank">Documentation</a>
							</p>
							<p class="card-text">
								<a id="contributionUrl" style="color: white" href="" target="_blank">Contribute</a>
							</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="page-section page-section">
    <div class="page-section_container container">
        <div class="page-section_row row">
          <div class="page-section_column col-12 text-center">
			  <h4>If you are an existing maintainer of a .NET Foundation project and want your project featured as a "Project Spotlight", feel free to enter a "Project Spotlight Issue" on the <a href="https://github.com/dotnet-foundation/projects/issues/new/choose" target="blank">Projects Repository of the .NET Foundation</a></h4>
		  </div>
		</div>
    </div>
</section>
</div>
<section class="page-section page-section--purple--light">
    <div class="page-section_container container">
        <div class="page-section_row row text-left">
            <div class="page-section_column col-12">
                <div id="SearchResults"></div>
                <div id="PresetProjects">
					<h1>Previous Spotlights</h1>
<div id="previousSpotlights"></div>

				</div>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
(async function () {
const urlParams = new URLSearchParams(window.location.search);
var projectName = urlParams.get('project');
var projects = []
var project;
$.ajax({
    url: "/api/project-spotlight",
    type: "GET",
    async: false,
    success: function (ps) {
        projects = ps;
        project = ps[0];
        if (projectName != null)
        {
        ps.forEach(apiProject => {
            if (apiProject.projectName.toLowerCase() == projectName.toLowerCase())
            {
                project = apiProject;
            }
        });
       }
       }
    });

var projectOwners = "";

var projectOwnersDiv = "";
if (project.projectOwners.length == 1)
{
  projectOwnersDiv = "<a href="+ project.projectOwners[0].url + " target='_blank'><i class='fab fa-github' aria-hidden='true'></i> " + project.projectOwners[0].name + "</a>";
}
else{
    project.projectOwners.forEach((p)=> {
    projectOwners += "<li><a href="+ p.url + " target='_blank'><i class='fab fa-github' aria-hidden='true'></i> " + p.name + "</a></li>";
});
  projectOwnersDiv = "<ul class='comma-list'>" +
    projectOwners +
"</ul>";
}

document.getElementById("projectOwners").innerHTML = projectOwnersDiv;

if (project.showContributers)
{
    var projectContributors = `<div class="card bg-foundation">
						            <div class="card-body card--features">
							            <h3 style="color: white;">Top 5 Contributors</h3>
							            <div style="display: inline-block; text-align: left;">
                                            <p id="projectContributors" class="card-text">
                                `;

    project.contributors.forEach((c)=> {
        projectContributors += "<a style='color: white' href=" + c.url + " target='_blank'><i style='color:white' class='fab fa-github' aria-hidden='true'></i> " + c.name + "</a><br /><br />";
});
projectContributors += `</p>
                    </div>
    			</div>
			</div>`;
document.getElementById("contributers").innerHTML = projectContributors;
}
else
{
    if (!project.loadIssues)
    {
        document.getElementById("columns").style.columnCount = 1;
    }
    else
    {
         document.getElementById("columns").style.columnCount = 2;
    }
}


if (project.showProjectName)
{
document.getElementById("projectHeader").innerHTML =  "<span id='projectName'>" + project.projectName + "</span><br /><br /> <img src=assets/projects/" + project.imageFileName.toLowerCase() + " id='projectImage' width='200' alt="+project.projectName + ">";
}
else
{
    document.getElementById("projectHeader").innerHTML =  "<img src=assets/projects/" + project.imageFileName.toLowerCase() + " id='projectImage' width='200' alt="+project.projectName + ">";
}
document.getElementById("projectDescription").innerHTML = project.projectDescription;

document.getElementById("projectYouTube").src = project.youtubeUrl;
document.getElementById("gitHubRepo").href = project.githubRepo;
document.getElementById("projectWebsite").href = project.projectWebsite;
document.getElementById("communityUrl").href = project.communityUrl;
document.getElementById("documentationUrl").href = project.documentationUrl;
document.getElementById("contributionUrl").href = project.contributionUrl;
    const orgs = project.gitHubOrg;
	const repos = [ project.gitHubRepoName ];

 var transcript_div = document.getElementById('transcript');
 $(transcript_div).load("assets/projects/spotlight-transcripts/" + project.transcriptFileName, function() {
            });

if (project.loadIssues)
{
    loadOpenIssues(orgs, repos, true, project.gitHubRepoName, project.issueLabel);
}
else
{
      if (!project.showContributers)
    {
        document.getElementById("columns").style.columnCount = 1;
    }
    else
    {
         document.getElementById("columns").style.columnCount = 2;
    }
}
/////// Build bottom list
  projects = projects.sort(function (a, b) {
    if (a.projectName > b.projectName) return 1;
    if (a.projectName < b.projectName) return -1;
    return 0;
  });

let alpha = projects.reduce((r, e) => {
  let alphabet = e.projectName[0];
  if (!r[alphabet]) r[alphabet] = { alphabet, record: [e] }
  else r[alphabet].record.push(e);
  return r;
}, {});

let list = Object.values(alpha);
list = list.sort(function (a, b) {
    if (a.projectName > b.projectName) return 1;
    if (a.projectName < b.projectName) return -1;
    return 0;
  });

var start = 0;
var prevSpotDiv = "";
while (start < list.length)
{
    prevSpotDiv += "<div class='row'>";

  _.first( _.rest(list, start), 3).forEach(letterGroup => {
        prevSpotDiv += `<div class="col-lg-4 col-sm-12 alph">
                        <hr />
                        <div class="alph-box">
                            <div class="letter">` + letterGroup.alphabet + `</div>
                            <div class="list">`;

letterGroup.record.sort(function (a, b) {
    if (a.projectName > b.projectName) return 1;
    if (a.projectName < b.projectName) return -1;
    return 0;
  });
        letterGroup.record.forEach(p => {
                prevSpotDiv +=    "<a class='project-item' href='/projects/spotlight?project=" + p.projectName + "'>" + p.projectName + "</a>";
                    });
        prevSpotDiv +=        `</div>
        </div>
    </div>`;
  });
    prevSpotDiv +=        `
        </div>`;
    start += 3;
}
document.getElementById("previousSpotlights").innerHTML = prevSpotDiv
})();
</script>
